iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
0
自我挑戰組

輕鬆Vue一下系列 第 24

Day24-v-charts/環狀圖

  • 分享至 

  • xImage
  •  

環狀圖

https://ithelp.ithome.com.tw/upload/images/20191008/201120765BjjN5SutN.jpg
在生成柱狀圖時,需要在html中建立一個ve-ring物件:
https://ithelp.ithome.com.tw/upload/images/20191008/20112076KQryIZNkKL.jpg
這裡將會介紹幾種簡單的設定:
1.它透過settings屬性將chartSettings變數綁定,設置餅圖半徑。radius就是用來控制圓餅圖的半徑的屬性,第一個值20代表著距離圓心20個單位長度後,開始生成環狀圖,而環狀圖會依據第二個值的大小有所不同,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191008/201120763NFadmtq22.jpg
https://ithelp.ithome.com.tw/upload/images/20191008/20112076MkOKUwoxMO.jpg
2.它透過settings屬性將chartSettings變數綁定,設置限制顯示的資料數目。而limitShowNum是用來控制欲顯示的資料數目,當資料量大於limitShowNum之值,則會被統一歸類為其他,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191008/20112076cJQWkGjVt1.jpg
https://ithelp.ithome.com.tw/upload/images/20191008/20112076erxduhKav7.jpg
Ps.資料會留較大的數目,較小的將會被統一歸類為其他
3.它透過settings屬性將chartSettings變數綁定,顯示玫瑰圖。這裡利用roseType來進行控制,結果如下:
https://ithelp.ithome.com.tw/upload/images/20191008/20112076FH5g6fF2oB.jpg
https://ithelp.ithome.com.tw/upload/images/20191008/20112076SCKAVezge8.jpg
明日預告:v-charts/v-charts/其他工具


上一篇
Day23-v-charts/圓餅圖
下一篇
Day25-v-charts/其他工具
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言